<template>
  <div
    class='container'
  >
    <el-alert
      :title="'共'+ questionList.counts + '条记录'"
      type="info"
      show-icon
      class="record"
    >
    </el-alert>
    <my-table
      :table-props="{
        data: questionList.items,
        border: true
      }"
      :columns="[
        { label: '试题编号', prop: 'id', width: 100, align: 'center' },
        { label: '学科', prop: 'number', width: 200, align: 'center' },
        { label: '目录', prop: 'company', width: 150, align: 'center' },
        { label: '题型', prop: 'tags', width: 150, align: 'center' },
        { label: '题干', prop: 'creatorID', width: 150, align: 'center' },
        { label: '录入时间', prop: 'addDate', width: 300, align: 'center' },
        { label: '难度', prop: 'remarks', width: 300, align: 'center' },
        { label: '录入人', prop: 'state', width: 100, align: 'center' },
        { label: '操作', slotName: 'operators', width: 300, align: 'center' }, // 带插槽
      ]"
      :pagination-props="{
        layout: 'total, pager',
        total: questionList.counts
      }"
      :pagination-events="events"
    >
      <template v-slot:operators="scope">
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="danger" @click="deleteUser(scope.items)" icon="el-icon-delete" circle></el-button>
      </template>
    </my-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'QuestionList',
  data () {
    return {
      currentPage: 1,
      pageSize: 5,
      events: {
        'current-change': this.onCurrentPageChange
      },
    }
  },
  computed: {
    ...mapState('questions', [
      'questionList'
    ])
  },
  methods: {
    ...mapActions('questions', [
      'updateQuestionList'
    ]),
    onCurrentPageChange(currentPage) {
      this.currentPage = currentPage
      this.updateQuestionList({
        page: this.currentPage,
        size: this.pageSize,
      });
    },
  },
  async created() {
    await this.updateQuestionList({
      page: this.currentPage,
      size: this.pageSize,
    });
  },
}
</script>

<style scoped lang='less'></style>
